<template>
  <div class="content-tree">
    <p class="title">公司组织架构(总人数:372)</p>
    <el-tree
      :data="treeData"
      accordion
      :props="defaultProps"
      @node-click="handleNodeClick"
      icon-class="el-icon-plus"
    ></el-tree>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
// lib
// components & widgets
// config
// script & public
// controller & service
// interface
// 其它

@Component
export default class TreeArea extends Vue {
  treeData = [
    {
      label: "一级 1",
      children: [
        {
          label: "二级 1-1",
          children: [
            {
              label: "三级 1-1-1",
            },
          ],
        },
      ],
    },
    {
      label: "一级 2",
      children: [
        {
          label: "二级 2-1",
          children: [
            {
              label: "三级 2-1-1",
            },
          ],
        },
        {
          label: "二级 2-2",
          children: [
            {
              label: "三级 2-2-1",
            },
          ],
        },
      ],
    },
    {
      label: "一级 3",
      children: [
        {
          label: "二级 3-1",
          children: [
            {
              label: "三级 3-1-1",
            },
          ],
        },
        {
          label: "二级 3-2",
          children: [
            {
              label: "三级 3-2-1",
            },
          ],
        },
      ],
    },
  ];
  defaultProps = {
    children: "children",
    label: "label",
  };
  handleNodeClick(data: any) {
    console.log(data);
  }
}
</script>

<style lang="scss">
.content-tree {
  overflow: scroll;
  margin-right: 10px;
  height: calc(100vh - 270px);
}
.title {
  margin-bottom: 10px;
  margin-left: 10px;
  padding: 10px 0;
  border-bottom: 2px solid #00cc8b;
  display: inline-block;
}
.el-tree-node:focus > .el-tree-node__content {
  background: #00cc8b;
  color: #fff;
}
.el-tree-node > .el-tree-node__content:hover {
  background: #00cc8b;
  color: #fff;
}
.el-tree {
  position: relative;
  cursor: default;
  border: 1px solid #dcd2d2;
  border-bottom: none;
  background: #f5f5f5;
}
.el-tree-node__content {
  display: flex;
  align-items: center;
  height: 26px;
  cursor: pointer;
  padding: 5px 0;
  border-bottom: 1px solid #dcd2d2;
}
</style>
